<template>
	<view>
		<view v-show="status == 'new'">
			<view name="表单" style="margin:20px 0px 0px 0px;">
				<!-- 第一部分 -->
				<view v-show="step == 1">
					<view name="门店头像" style="text-align: center;">
						<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.img" width="80px" height="80px"></u-image>
						<u-text customStyle="margin:0px auto;" type="info" text="点击上传门店头像" :size="12" @click="uploadImg('avatar')"></u-text>
					</view>
					<u-cell-group :customStyle="{ 'margin-top': '30px' }">
						<u-cell title="类型" @click="showTypePicker = true" :value="formValue.shopTypeTxt" :isLink="true" arrow-direction="right">
							<view slot="value">{{ formValue.shopTypeTxt }}</view>
						</u-cell>
						<u-cell title="店铺名称" :value="formValue.shopName" :isLink="true" arrow-direction="right" @click="toPage('shopName')"></u-cell>
						<u-cell title="负责人" :value="formValue.charger" :isLink="true" arrow-direction="right" @click="toPage('charger')"></u-cell>
						<u-cell title="身份证号码" :value="formValue.idNum" :isLink="true" arrow-direction="right" @click="toPage('idNum')"></u-cell>
						<view v-show="formValue.shopType == 'Company'">
							<u-cell title="纳税识别号" :value="formValue.businessNum" :isLink="true" arrow-direction="right" @click="toPage('businessNum')"></u-cell>
						</view>
						<u-cell title="电话" :value="formValue.phone" :isLink="true" arrow-direction="right" @click="toPage('phone')"></u-cell>
						<u-cell title="微信" :value="formValue.wechat" :isLink="true" arrow-direction="right" @click="toPage('wechat')"></u-cell>
						<u-cell title="定位" :value="formValue.location.address" :isLink="true" arrow-direction="right" @click="pickLocation"></u-cell>
						<u-cell title="地址" :value="formValue.addr" :isLink="true" arrow-direction="right" @click="toPage('addr')"></u-cell>
					</u-cell-group>
				</view>

				<!-- 第二部分 -->
				<view name="第二部分图片上传" v-show="step == 2" style="text-align: center;">
					<view name="身份证正面" style="text-align: center;">
						<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idOnPicImg" width="200px" height="136px"></u-image>
						<u-text customStyle="margin:0px auto;" type="info" text="点击上传身份证正面" :size="12" @click="uploadImg('idOnPic')"></u-text>
					</view>
					<view name="身份证反面" style="text-align: center;">
						<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idOffPicImg" width="200px" height="200px"></u-image>
						<u-text customStyle="margin:0px auto;" type="info" text="点击上传身份证反面" :size="12" @click="uploadImg('idOffPic')"></u-text>
					</view>

					<view name="手持身份证" style="text-align: center;">
						<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idHandPicImg" width="200px" height="200px"></u-image>
						<u-text customStyle="margin:0px auto;" type="info" text="点击上传半身手持身份证照" :size="12" @click="uploadImg('idHandPic')"></u-text>
					</view>

					<view v-show="formValue.shopType == 'Company'" name="营业执照" style="text-align: center;">
						<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.businessPicImg" width="200px" height="118px"></u-image>
						<u-text customStyle="margin:0px auto;" type="info" text="点击上传营业执照" :size="12" @click="uploadImg('business')"></u-text>
					</view>
				</view>

				<!-- 第三部分 -->
				<view name="门店介绍" v-show="step == 3">
					<u-cell-group customStyle="font-size:12px;">
						<u-cell title="介绍" :value="formValue.intro" :isLink="true" arrow-direction="right" @click="toPage('intro')"></u-cell>
						<u-cell title="勾选技能" value="勾选下方技能"></u-cell>
					</u-cell-group>
					<u-checkbox-group :value="formValue.skills" iconPlacement="right" placement="column" @change="skillChanged">
						<view style="margin:10px 20px 5px 20px;" v-for="(item, itemIndex) in skillOpts" :key="itemIndex">
							<u-checkbox labelSize="14px" :name="item.tagLabel" :label="item.tagLabel"></u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>

			<view name="底部按钮" style="margin: 20px 10px 100px 10px;">
				<view v-show="step > 1"><u-button :customStyle="{ 'margin-top': '10px' }" type="primary" text="上一步" @click="preStep"></u-button></view>
				<view v-show="step < totalStep"><u-button :customStyle="{ 'margin-top': '10px' }" type="primary" text="下一步" @click="nextStep"></u-button></view>
				<u-button :customStyle="{ 'margin-top': '10px' }" type="primary" :loading="loading" text="临时保存" @click="saveTemp"></u-button>
				<view v-show="step == totalStep"><u-button :customStyle="{ 'margin-top': '10px' }" type="primary" :loading="loading" text="提交审批" @click="submit"></u-button></view>
			</view>
		</view>

		<view v-show="status == 'checking'" style="text-align: center;margin:50px 10px 10px 10px;">
			<view style="text-align: center;">
				<u-image :customStyle="{ margin: '10px auto' }" width="100px" height="100px" :src="checkingPic" />
				<text>店铺信息3个工作日内审核完成，请耐心等待。</text>
				<u-button :customStyle="{ 'margin-top': '30px' }" type="primary" :loading="loading" text="返回上级" @click="toPage('parent')"></u-button>
			</view>
		</view>

		<!--<u-picker :show="showTypePicker" @cancel="this.showTypePicker = !this.showTypePicker" :columns="typeOpts" keyName="label" @confirm="pickType"></u-picker>-->

		<u-action-sheet :actions="typeOpts" cancelText="取消" title="选择" @select="pickType" @close="this.showTypePicker = false" :show="showTypePicker"></u-action-sheet>
	</view>
</template>

<script>
import { SexOpts, DefaultHead, Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
import { User } from '@/utils/user.js';
export default {
	data() {
		return {
			loading: false,
			status: 'new',
			checkingPic: IMG_SERVER + '/images/checking.png',
			totalStep: 3,
			step: 1,
			skillOpts: [],
			showTypePicker: false,
			typeOpts: [{ name: '个人', label: '个人', value: 'Personal', id: 'Personal' }, { name: '公司', label: '公司', value: 'Company', id: 'Company' }],
			formValue: {
				shopType: 'Personal',
				shopTypeTxt: '个人',
				shopName: '小何小店',
				charger: '何生',
				idNum: '441226198603021421', //身份证号码
				businessNum: '', //纳税识别号
				phone: '13560915570',
				wechat: 'vvsnake520',
				addr: '广东省肇庆市端州区东湖二路',
				location: { lat: null, lng: null, address: '' },
				poster: '',
				img: '',
				idOnPicImg: IMG_SERVER + '/images/id_pic_on.png', //身份证正面显示图片
				idOnPic: '', //身份证正面图片
				idOffPicImg: IMG_SERVER + '/images/id_pic_off.png', //身份证反面显示图片
				idOffPic: '', //身份证反面图片
				idHandPicImg: IMG_SERVER + '/images/id_hand.png', //手持身份证照
				idHandPic: '',
				businessPicImg: IMG_SERVER + '/images/business.png', //营业执照显示图片
				businessPic: '', //营业执照图片
				intro: '', //门店介绍
				skills: [] //拥有技能
			}
		};
	},
	onLoad() {
		let _ = this;
		uni.$on('emitParams', data => {
			if (data) {
				console.log('返回结果', data);
				if (data.name == 'charger') {
					_.formValue.charger = data.value;
				} else if (data.name == 'shopName') {
					_.formValue.shopName = data.value;
				} else if (data.name == 'phone') {
					_.formValue.phone = data.value;
				} else if (data.name == 'wechat') {
					_.formValue.wechat = data.value;
				} else if (data.name == 'addr') {
					_.formValue.addr = data.value;
				} else if (data.name == 'intro') {
					_.formValue.intro = data.value;
				} else if (data.name == 'idNum') {
					_.formValue.idNum = data.value;
				} else if (data.name == 'businessNum') {
					_.formValue.businessNum = data.value;
				}
			}
		});
		//获取技能
		Request.get('/api/tags/all?group=system', {}).then(res => {
			this.skillOpts = res;
		});
		//加载我的点铺信息
		this.loadShopInfo();
	},
	onShow() {},
	methods: {
		//加载点铺信息
		loadShopInfo() {
			let _ = this;
			Request.get('/api/shop/detail', {}).then(res => {
				if (res.shopId && res.shopId > 0) {
					_.formValue = res;
					_.formValue.img = IMG_SERVER + res.poster;
					_.formValue.shopTypeTxt = res.shopType == 'Personal' ? '个人' : '公司';
					_.formValue.idOnPicImg = IMG_SERVER + (res.idOnPic == '' ? '/images/id_pic_on.png' : res.idOnPic);
					_.formValue.idOffPicImg = IMG_SERVER + (res.idOffPic == '' ? '/images/id_pic_off.png' : res.idOffPic);
					_.formValue.businessPicImg = IMG_SERVER + (res.businessPic == '' ? '/images/business.png' : res.businessPic);
					_.formValue.idHandPicImg = IMG_SERVER + (res.idHandPic == '' ? '/images/id_hand.png' : res.idHandPic);
					console.log('门店信息===>', _.formValue);
				}
			});
		},
		//临时保存
		saveTemp() {
			let _ = this;
			_.loading = true;
			Request.post('/api/shop/saveTemp', _.formValue)
				.then(res => {
					_.loading = false;
					Toast.success('保存成功');
				})
				.catch(res => {
					_.loading = false;
				});
		},
		//上传头像
		uploadImg(name) {
			let _ = this;
			uni.chooseImage({
				count: 1,
				success(res) {
					console.log('图片选择结果>>>', res);
					if (res.tempFilePaths.length > 0) {
						Toast.loadingT('上传中...');
						let filePath = res.tempFilePaths[0];
						console.log('上传文件路径>>>', filePath);
						uni.uploadFile({
							url: VITE_API_URL + '/api/image/avatar/upload',
							name: 'file',
							filePath: filePath,
							header: {
								token: User.getToken()
							},
							success(res) {
								console.log('图片上传返回结果>>>', res);
								if (res.data) {
									let result = JSON.parse(res.data).result;
									if (name == 'avatar') {
										_.formValue.poster = result[0].savePath;
										_.formValue.img = IMG_SERVER + result[0].savePath;
									} else if (name == 'idOnPic') {
										_.formValue.idOnPic = result[0].savePath;
										_.formValue.idOnPicImg = IMG_SERVER + result[0].savePath;
									} else if (name == 'idOffPic') {
										_.formValue.idOffPic = result[0].savePath;
										_.formValue.idOffPicImg = IMG_SERVER + result[0].savePath;
									} else if (name == 'business') {
										_.formValue.businessPic = result[0].savePath;
										_.formValue.businessPicImg = IMG_SERVER + result[0].savePath;
									} else if (name == 'idHandPic') {
										_.formValue.idHandPic = result[0].savePath;
										_.formValue.idHandPicImg = IMG_SERVER + result[0].savePath;
									}
								}
								Toast.hideLoading();
							},
							fail(res) {
								console.log('上传失败回调', res);
								Toast.error('上传失败');
							}
						});
					}
				}
			});
		},

		/**
		 * 提交审批
		 */
		submit() {
			let _ = this;
			_.loading = true;
			Request.post('/api/shop/submitCheck', _.formValue)
				.then(res => {
					_.loading = false;
					Toast.success('提交成功');
					_.status = 'checking';
				})
				.catch(res => {
					_.loading = false;
				});
		},

		/**
		 * 选择类型
		 * @param {Object} val
		 */
		pickType(val) {
			this.formValue.shopType = val.value;
			this.formValue.shopTypeTxt = val.label;
			this.showTypePicker = false;
		},
		//选择定位
		pickLocation() {
			let _ = this;
			uni.chooseLocation({
				success(res) {
					console.log('获取定位信息===>', res);
					if (res.errMsg == 'chooseLocation:ok') {
						_.formValue.location.address = res.address;
						_.formValue.location.lat = res.latitude;
						_.formValue.location.lng = res.longitude;
						if (!_.formValue.addr) {
							_.formValue.addr = res.address;
						}
					}
				}
			});
		},

		//页面跳转
		toPage(page) {
			let url = '';
			if (page == 'parent') {
				uni.navigateBack({
					success(res) {}
				});
			} else {
				if (page == 'charger') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.charger + '&name=charger';
				} else if (page == 'shopName') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.shopName + '&name=shopName';
				} else if (page == 'phone') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.phone + '&name=phone';
				} else if (page == 'wechat') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.wechat + '&name=wechat';
				} else if (page == 'addr') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.addr + '&name=addr';
				} else if (page == 'intro') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.intro + '&name=intro';
				} else if (page == 'idNum') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.idNum + '&name=idNum';
				} else if (page == 'businessNum') {
					url = '/pages/components/form/textarea/index?data=' + this.formValue.businessNum + '&name=businessNum';
				}
				uni.navigateTo({
					url: url
				});
			}
		},

		//上一步
		preStep() {
			if (this.step > 1) {
				this.step = this.step - 1;
			}
		},
		//下一步
		nextStep() {
			let _ = this;
			if (this.step == 1) {
				this.checkStepOne()
					.then(res => {
						_.step = _.step + 1;
					})
					.catch(res => {
						Toast.error(res);
					});
			} else if (this.step == 2) {
				this.checkStepTwo()
					.then(res => {
						_.step = _.step + 1;
					})
					.catch(res => {
						Toast.error(res);
					});
			}
		},
		//检测第二步数据
		checkStepTwo() {
			let _ = this;
			return new Promise((resolve, reject) => {
				if (!_.formValue.idOnPic) {
					reject('上传身份证正面');
				}
				if (!_.formValue.idOffPic) {
					reject('上传身份证反面');
				}
				if (_.formValue.shopType == 'Company' && !_.formValue.businessPic) {
					reject('上传营业执照');
				}
				resolve('ok');
			});
		},
		//检测第一步数据
		checkStepOne() {
			let _ = this;
			return new Promise((resolve, reject) => {
				if (!_.formValue.poster) {
					reject('上传门店头像');
				}
				if (!_.formValue.shopType) {
					reject('选择类型');
				}
				if (!_.formValue.shopName) {
					reject('填写店铺名称');
				}
				if (!_.formValue.charger) {
					reject('填写负责人');
				}
				if (!_.formValue.idNum) {
					reject('填写负责人身份证');
				}
				if (_.formValue.shopType == 'Company' && !_.formValue.businessNum) {
					reject('填写纳税人识别号');
				}
				if (!_.formValue.phone) {
					reject('填写电话');
				}
				if (!_.formValue.addr) {
					reject('填写地址');
				}
				if (!_.formValue.location.address) {
					reject('选择定位');
				}
				resolve('ok');
			});
		},
		//技能选择变化
		skillChanged(val) {
			this.formValue.skills = val;
		}
	}
};
</script>

<style></style>
